<template>
  <div class="purchase_wrap">
    <div class="total_wrap">
      <span>My Now point</span>
      <span>{{total}} CNY</span>
    </div>
    <div class="out_wrap">
      <label for="out_num" class="out_txt">Purchase amount</label>
      <span class="line"></span>
      <input type="number" id="out_num" placeholder="Must be integers" v-model="num" @input="change">
      <p class="total">
        <span>Purchase interval: lowest {{minNum}} ~ Highest {{maxNum}}</span>
      </p>
    </div>
    <div class="other_wrap" v-if="isOther">
      <span>Purchase amount<span class="exchange">(automatic)</span></span>
      <span>{{change}} {{unit}}</span>
    </div>
    <div class="btn_wrap">
      <div class="public_btn" @click="sure">Release purchase</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'purchase',
  data () {
    return {
      total: '',
      minNum: '',
      maxNum: '',
      num: '',
      scale: '',
      unit: 'USD',
      isOther: false
    };
  },
  methods: {
    sure () {
      if (!this.HasData(this.num)) {
        this.Toast('Please enter purchase amount.');
      } else if (parseFloat(this.num) < this.minNum || parseFloat(this.num) > this.maxNum) {
        this.Toast(`Purchase interval: minimum ${this.minNum} ~ Highest ${this.maxNum}`);
      } else if (parseFloat(this.num) <= 0) {
        this.Toast('Illegal purchase quantity');
      } else if (!/^[1-9]\d*$/.test(this.num)) {
        this.Toast('please enter an integer');
      } else {
        this.isName();
      }
    },
    // Access to information interface
    getInfo () {
      this.axios.post('index/buyandbuy/buy_zhong_page', {
        rate: this.ind
      }).then(({data}) => {
        if (data.status === 200) {
          this.total = data.data.present_point;
          this.minNum = data.data.low_xian_buy;
          this.maxNum = data.data.up_xian_buy;
          this.scale = data.data.rate;
        } else {
          this.Toast(data.message);
        }
      });
    },
    // Execute the purchase
    goSell () {
      this.Modal('Tips', 'When buying a spot, it will be seized in advance.100As the margin, the order will be refunded after completion of the order.', ['cancel', 'Sure'], () => {
        this.ShowPassword(() => {
          this.axios.post('index/buyandbuy/buy_zhong_exe', {
            num: this.num,
            pass: this.passWord
          }).then(({data}) => {
          // Account unbound
            if (data.status === 205) {
              this.Modal('Tips', 'Before you bind the payment method, please bind it before.', ['cancel', 'Bindings'], () => {
                this.$router.push('bindList');
              });
            } else if (data.status === 201) {
              this.Modal('Tips', 'You have not set the password for the transaction, please go ahead and set it up.', ['cancel', 'To set up'], () => {
                this.$router.push('setPassword');
              });
            } else if (data.status === 200) {
              this.Toast(['Release success', 'Can go to my order view status']);
              this.num = '';
              setTimeout(() => {
                this.$router.replace('myOrder/buyOrder?navIndex=0');
              }, 1200);
            } else if (data.status === 208) {
              this.Modal('Tips', 'You have an order under purchase and you can continue to purchase it after the order is completed', 'Sure', () => {
                this.num = '';
              });
            } else {
              this.Toast(data.message);
              this.num = '';
            }
          });
        });
      });
    },
    // Determining whether to set payment password
    isSetPwd () {
      this.axios.get('index/users/pay_pass').then(({data}) => {
        if (data.status === 200) {
          this.goSell();
        } else {
          this.Modal('Set transaction password', 'You need to set up the transaction password before purchasing operation. Please set up immediately.', ['cancel', 'To set up'], () => {
            this.$router.push('setPassword');
          });
        }
      });
    },
    // Judging whether real name is true or not
    isName () {
      this.axios.get('index/rename/rename_s').then(({data}) => {
        if (data.status === 201) {
          this.Modal('Real name authentication', 'You do not have real name authentication yet., Please go to the certification first.', 'To authenticate', () => {
            this.$router.push('certification');
          });
        } else if (data.status === 200) {
          this.isSetPwd();
        }
      });
    }
  },
  computed: {
    // Proportion
    change () {
      if (this.num) {
        return (parseFloat(this.num) * parseFloat(this.scale)).toFixed(2);
      } else {
        return '0.00';
      }
    },
    // Two level cipher
    passWord () {
      return this.$store.state.modal.password;
    }
  },
  beforeMount () {
    if (this.lang === 'China[CNY]') {
      this.isOther = false;
    } else {
      this.isOther = true;
    };
    let area = localStorage.getItem('area');
    if (area) {
      area = JSON.parse(area);
      // let reg = /[A-Z]+/g;
      let str = area.area;
      var m = str.match(/([^[\]]+)(?=\])/g);
      this.unit = m[0];
    }
  },
  mounted () {
    this.getInfo();
  },
  props: [
    'lang',
    'ind'
  ]
};
</script>

<style lang="scss" scoped>
  @import '../style/public.scss';
  .purchase_wrap{
    box-sizing: border-box;
    height:100%;
    padding-top: 177px;
    background: #f4f5f7;
    .total_wrap {
      width: 100%;
      z-index:10;
      height: 108px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 28px;
      color: #222222;
      padding: 0 30px;
      background: #fff;
      margin: 20px 0;
    }
    .out_wrap {
      background: #fff;
      padding: 0 26px 0 34px;
      position: relative;
      .out_txt {
        height: 86px;
        line-height: 86px;
        font-size: 28px;
        color: #999999;
        display: block;
      }
      .line {
        display: inline-block;
        width: 2Px;
        height: 50px;
        background: #afafaf;
        position: absolute;
        top: 37%;
        left: 6%;
      }
      input {
        width: 100%;
        height: 102px;
        line-height: 102px;
        font-size: 60px;
        color: #222222;
        border-bottom: 1Px solid #e6e6e6;
        text-indent: 35px;
        &::placeholder {
          font-size: 30px;
          color: #999;
          line-height: normal;
          line-height: 102px;
        }
      }
      .total {
        font-size: 107px;
        line-height: 107px;
        color: #666666;
        font-size: 28px;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
    }
    .other_wrap {
      height: 108px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 28px;
      color: #222222;
      background: #fff;
      padding: 0 30px;
      margin-top: 20px;
      .exchange {
        color: #afafaf;
      }
    }
    .btn_wrap {
      margin-top: 80px;
      text-align: center;
      .public_btn {
        box-shadow: 0px 0px 10px 10px #f6ebd2;
      }
    }
  }
</style>
